<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>027-动画案例</title>
		<style>
			.box {
				width: 130px;
				height: 130px;
				background-image: url('./images/bike.png');
				background-repeat: no-repeat;
				margin: 100px auto;

				/* 动画按步进执行，共32份图，减去第一份图，剩下的就是要步进执行的图片，这里相当于每一秒就换一张图 */
				/* 属性解释：动画名，1秒执行完移动，1秒又分为31步执行(好处是不会有重影)，无限次播放 */
				animation: bike 1s steps(31) infinite;
			}

			/* 定义动画 从图的最上面移动到图的最下面 */
			@keyframes bike {
				0% {
					background-position: 0 0;
				}
				100% {
					background-position: 0 -4030px; /* 4030px 表示图片的总高度 减去 一份的图片高度 为 最后一张图的位置 */
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
